<template>
  <div class="grid">
    <!-- <van-grid :column-num="3">
      <van-grid-item v-for="value in 9" :key="value" icon="photo-o" text="文字"/>
    </van-grid>
    -->
    <van-grid :border="false" :column-num="5">
      <van-grid-item>
        <van-image src="https://img.yzcdn.cn/vant/apple-1.jpg"/>
      </van-grid-item>
      <van-grid-item>
        <van-image src="https://img.yzcdn.cn/vant/apple-2.jpg"/>
      </van-grid-item>
      <van-grid-item>
        <van-image src="https://img.yzcdn.cn/vant/apple-3.jpg"/>
      </van-grid-item>
      <van-grid-item>
        <van-image src="https://img.yzcdn.cn/vant/apple-3.jpg"/>
      </van-grid-item>
      <van-grid-item>
        <van-image src="https://img.yzcdn.cn/vant/apple-3.jpg"/>
      </van-grid-item>
    </van-grid>

    <van-grid square :border="false">
      <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字"/>
    </van-grid>

    <van-grid :column-num="2">
      <van-grid-item icon="home-o" text="文字" dot/>
      <van-grid-item icon="search" text="文字" info="99+"/>
    </van-grid>

    <van-grid :gutter="10" >
      <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字" :border="false"/>
    </van-grid>
  </div>
</template>

<script>
export default {
  name: "grid",
  data() {
    return {};
  },
  methods: {},
  components: {},
  computed: {},
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
</style>